<template>
  <div id="userTable">
    <el-table
      
      :data="tableData"
      stripe
      height="65vh"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 100%;overflow-x: hidden;">
      <el-table-column
        prop="id"
        label="序号">
      </el-table-column>

      <el-table-column
        prop="enabled"
        label="启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeEnable(scope.row)">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column
        prop="accountNonLocked"
        label="锁定">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.accountNonLocked"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeAccountNonLocked(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      
      <el-table-column
        prop="username"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="telNumber"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="email"
        label="email">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.sex === true">男</span>
          <span v-if="scope.row.sex === false">女</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        :formatter="bms_short"
        label="注册时间">
      </el-table-column>
      <el-table-column
        prop="lastLoginTime"
        :formatter="bms_short"
        label="最后登录时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import tool from '@/assets/js/tool'
import {
  accountNonLockedUserStatus,enableUserStatus,deleteUserByUserId
} from '@/assets/request/api.js';
export default {
  name: 'userTable',
  props: ['tableUserData'],
  mixins: [tool],
  data() {
    return {
      tableData: [],
    }
  },
  methods: {
    handleClick(row) {
      this.$emit("editUser",row)
    },
    changeEnable(row) {
      enableUserStatus(row.userId).then(res => {
        this.$message({
          type: 'success',
          message: '切换成功'
        });
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err.message
        });
      })
    },
    changeAccountNonLocked(row) {
      accountNonLockedUserStatus(row.userId).then(res => {
        this.$message({
          type: 'success',
          message: '切换成功'
        });
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err.message
        });
      })
    },
    deleteUser(userId) {
      deleteUserByUserId(userId).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.$emit("selectUser",{ })
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err.message
        });
      })
    },
    deleteClick(row) {
      this.$confirm('此操作将删除账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUser(row.userId)        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  },
  mounted() {
    
  },
  watch: {
    tableUserData: {
      deep: true,         // 深度监听
      immediate: false,    // immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，
      handler(newValue,oldValue) {
        this.tableData = newValue
        this.$emit('changeLoad',false)
      }
    },
    
  }
    
}
</script>

<style scoped>


 
</style>
